- Resumen -

En esta actividad se realizaron distintos estilos con ayuda de Replit y con un nuevo documento tipo styles.css, en donde se le asignaron distintas características a cada uno de treinta estilos.

- Introducción -

El diseño y la presentación visual de una página web son aspectos fundamentales para asegurar una experiencia de usuario agradable y efectiva. En este reporte, exploraremos el proceso de creación de estilos en HTML utilizando CSS (Cascading Style Sheets). CSS permite definir y aplicar estilos a los elementos HTML de una manera consistente y mantenible, separando el contenido de su presentación. Nos enfocaremos en la creación y aplicación de estilos para diferentes niveles de encabezados (h1, h2, h3, etc.), así como en la utilización de clases CSS para diversificar la apariencia de los elementos cuando los encabezados por defecto no son suficientes.

Nuestro objetivo es entender la importancia de CSS en el desarrollo web, aprender a aplicar estilos a elementos HTML y crear y personalizar estilos avanzados. Para ello, comenzaremos con una breve introducción teórica a CSS, destacando su sintaxis básica y su integración con HTML. Luego, implementaremos estilos básicos en encabezados HTML para entender cómo CSS afecta la presentación de los elementos. Posteriormente, crearemos múltiples clases CSS para aplicar estilos variados a diferentes elementos, demostrando la flexibilidad y reutilización de estilos. Finalmente, implementaremos y analizaremos estilos avanzados, incluyendo sombras de texto, transformaciones y gradientes, para mejorar la estética y usabilidad de la página.

Se espera que al finalizar este reporte, los lectores comprendan la importancia y el uso de CSS en el diseño web, sean capaces de aplicar y personalizar estilos CSS a elementos HTML y conozcan técnicas avanzadas de CSS para mejorar la presentación visual de las páginas web. Este conocimiento no solo mejorará las habilidades de diseño web, sino que también contribuirá a la creación de sitios web más atractivos y funcionales, mejorando la experiencia del usuario y la eficacia de la comunicación visual en línea.

- Desarrollo -

Realizar un muestrario de 30 estilos diferentes, cada estilo debe tener minimo 4 parametros

Resultados

En un principio, se realizó un código principal llamado index, en el cuál se especifican únicamente los títulos "Estilo #" como se muestra a continuación:

Así mismo, se realizó un archivo styles.css en donde a cada uno de los estilos definidos en el index, tuviera un formato distinto.

Finalmente, se simularon ambos códigos para que se apreciaran las diferencias entre los treinta estilos, cada uno con un formato diferente, en donde se procuró hacer cambios en la alineación, color, estilo, tamaño, etc.

A continuación, se presenta un video en el cual se aprecian los distintos estilos junto con los códigos correspondientes.

- Conclusiones -

Las actividades realizadas permiten una comprensión profunda y práctica de los componentes esenciales de una red local y sus interconexiones. Al elaborar la tabla comparativa, identificamos las diferencias y usos específicos de cada elemento, así como su clasificación en activos y pasivos, lo que facilita la visualización de su función dentro de la red.

La creación de la matriz de interconexión, con la determinación del tipo de cable adecuado para cada conexión, refuerza el conocimiento sobre cómo se integran los distintos componentes para formar una red eficiente y funcional. Estas tareas no solo consolidan los conceptos teóricos aprendidos, sino que también proporcionan habilidades prácticas esenciales para diseñar, instalar y gestionar redes locales en entornos reales.

- Descargables -

Descargar index: Index.html

Descargar styles: Styles.css